<template>
  <div class="app-container">
    <el-container direction="vertical">
      <!-- 顶部导航栏 -->
      <el-header height="80px">
        <Header />
      </el-header>

      <!-- 主内容区 -->
      <el-main>
        <!-- 路由视图 -->
        <router-view />
      </el-main>

      <!-- 底部播放条容器 -->
      <div
        class="player-container"
        @mouseover="showPlayer"
        @mouseleave="hidePlayer"
      >
        <!-- 播放器触发区域 -->
        <div class="player-trigger"></div>
        <!-- 播放器本身 -->
        <PlayerBar
          ref="playerBar"
          :class="{ 'player-visible': playerVisible }"
        />
      </div>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import PlayerBar from "@/components/PlayerBar.vue";
import eventBus, { EventType } from "@/utils/eventBus.js";

export default {
  components: {
    Header,
    PlayerBar,
  },
  data() {
    return {
      playerVisible: false,
      hideTimeout: null,
    };
  },
  methods: {
    showPlayer() {
      this.playerVisible = true;
      clearTimeout(this.hideTimeout);
    },
    hidePlayer() {
      // 延迟隐藏，避免用户不小心移出时立即隐藏
      this.hideTimeout = setTimeout(() => {
        this.playerVisible = false;
      }, 500);
    },
    // 直接播放歌曲的辅助方法，供子组件调用
    playSong(songId) {
      this.$refs.playerBar.playSongById(songId);
    },
  },
  mounted() {
    // 将playerBar实例添加到全局，方便任何组件都能调用播放功能
    window.playerBar = this.$refs.playerBar;

    // 监听全局播放事件
    eventBus.on(EventType.PLAY_SONG, () => {
      // 确保播放器可见
      this.playerVisible = true;
    });
  },
  beforeUnmount() {
    // 清理监听器
    eventBus.off(EventType.PLAY_SONG);
    // 移除全局实例
    window.playerBar = null;
  },
};
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  background: white;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  position: relative;
}

.el-header {
  padding: 0 20px;
  background: linear-gradient(90deg, #acb3d8 0%, #9176db 100%);
}

.el-main {
  padding: 20px;
  padding-bottom: 20px; /* 为播放器留出空间 */
}

.player-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 70px;
  overflow: hidden;
}

.player-trigger {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 20px;
  cursor: pointer;
  z-index: 1001;
}

/* 播放器动画效果 */
.player-bar {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.player-visible {
  transform: translateY(0) !important;
}
</style>
